<template>
	<view class="container">
		<view v-if="checkPermi(['puyu:student:add'])">
			<button class="uni-button" style="color:#ffffff;backgroundColor:#993399;borderColor:#993399;width: 100%;margin: 10rpx 0;"
				type="primary" @click="handleAddStudent()">添加学生</button>
		</view>
		<uni-section title="搜索" type="line" v-if="checkRole(['manager'])"></uni-section>
		<view class="query-form" v-if="checkRole(['manager'])">
			<uni-table  style="background-color: white;">
				<uni-tr>
					<uni-td width="50%" align="center">
						<uni-datetime-picker start-placeholder="期限开始" end-placeholder="期限结束" type="daterange" :clear-icon="true" v-model="dateRange" />
					</uni-td>
					<uni-td width="50%" align="center">
						<uni-combox :candidates="studentCodeRange" placeholder="选择学号" v-model="queryParams.studentCode" @input="onStudentCode"></uni-combox>
					</uni-td>
				</uni-tr>
				<uni-tr>
					<uni-td width="50%" align="center">
						<uni-combox :candidates="studentNameRange" placeholder="选择学员" v-model="queryParams.studentName" @input="onStudentName"></uni-combox>
					</uni-td>
					<uni-td width="50%" align="center">
						<uni-combox :candidates="studentStatusRange" placeholder="红黄绿" v-model="queryParams.studentStatusLabel" @input="onStudentStatus"></uni-combox>
					</uni-td>
				</uni-tr>
				<uni-tr>
					<uni-td width="50%" align="center">
						<uni-combox :candidates="trainingTypeRange" placeholder="训练类型" v-model="queryParams.trainingTypeLabel" @input="onTrainingType"></uni-combox>
					</uni-td>
					<uni-td width="50%" align="center">
						<uni-easyinput v-model="queryParams.phone" placeholder="请输入手机号" />
					</uni-td>
				</uni-tr>
			</uni-table>
			<view class="search">
				<view class="button"><button class="uni-button" size="mini" type="primary" @click="handleQuery">搜索</button></view>
				<view class="button"><button class="uni-button" size="mini" type="warn" @click="handleQueryZero">课时用完</button></view>
				<view class="button"><button class="uni-button" size="mini" type="warn" @click="handleQueryMonth">三个月内到期</button></view>
				<view class="button"><button class="uni-button" size="mini" type="warn" @click="handleQueryFifteen">15天未上课</button></view>
			</view>
			<!-- <view class="query-time">
				<uni-datetime-picker start-placeholder="期限开始" end-placeholder="期限结束" type="daterange" :clear-icon="true" v-model="dateRange" />
			</view>
			<view class="query-item">
				<uni-combox :candidates="studentCodeRange" placeholder="选择学号" v-model="queryParams.studentCode" @input="onStudentCode"></uni-combox>
			</view>
			<view class="query-item">
				<uni-combox :candidates="studentNameRange" placeholder="选择学员" v-model="queryParams.studentName" @input="onStudentName"></uni-combox>
			</view>
			<view class="query-item">
				<uni-combox :candidates="studentStatusRange" placeholder="红黄绿" v-model="queryParams.studentStatusLabel" @input="onStudentStatus"></uni-combox>
			</view>
			<view class="query-item">
				<uni-combox :candidates="trainingTypeRange" placeholder="训练类型" v-model="queryParams.trainingTypeLabel" @input="onTrainingType"></uni-combox>
			</view>
			<view class="query-item">
				<uni-easyinput v-model="queryParams.phone" placeholder="请输入手机号" />
			</view>
			<view class="query-item">
				<button class="uni-button" size="mini" type="primary" @click="handleQuery">搜索</button>
			</view>
			<view class="query-item">
				<button class="uni-button" size="mini" type="warn" @click="handleQueryZero">课时用完</button>
			</view>
			<view class="query-item">
				<button class="uni-button" size="mini" type="warn" @click="handleQueryMonth">三个月内到期</button>
			</view>
			<view class="query-item">
				<button class="uni-button" size="mini" type="warn" @click="handleQueryFifteen">15天未上课</button>
			</view> -->
		</view>
		<uni-section :title="'学员信息:共 ' + total + ' 人'" type="line"></uni-section>
		<uni-table ref="table" :loading="loading" border stripe emptyText="暂无更多数据">
			<uni-tr>
				<uni-th align="center">学员信息</uni-th>
				<uni-th width="250rpx" align="center">操作</uni-th>
			</uni-tr>
			<uni-tr v-for="(item, index) in tableList" :key="index">
				<uni-td>
					<view class="name">学号: {{ item.studentCode }}</view>
					<view class="name">学员姓名: {{ item.studentName }}</view>
					<view class="name">手机号: {{ item.phone }}</view>
					<view class="name">生日: {{ parseTime(item.birthday, '{y}-{m}-{d}') }}</view>
					<view class="name">缴费: {{ item.money }}</view>
					<view class="name">节数: {{ item.classNum }}</view>
					<view class="name">剩余节数: {{ item.classBalance }}</view>
					<view class="name">训练类型: {{ showTrainingType(item.trainingType) }}</view>
					<view class="name">报名日期: {{ parseTime(item.joinTime, '{y}-{m}-{d}') }}</view>
					<view class="name">有效日期: {{ parseTime(item.expiredTime, '{y}-{m}-{d}') }}</view>
					<view :class="getStatusClass(item.studentStatus)">{{ showStudentStatus(item.studentStatus) }}</view>
					<view class="name remark">{{ item.remark }}</view>
				</uni-td>
				<uni-td align="center">
					<view v-if="checkPermi(['puyu:student:edit'])">
						<button class="uni-button" size="mini" type="primary"
							@click="handleEditStudent(item)">修改</button>
					</view>
					<view v-if="checkPermi(['puyu:student:listLesson'])">
						<button class="uni-button" size="mini" type="default"  @click="handleStudentLesson(item)"
							style="color:#ffffff;backgroundColor:#993399;borderColor:#993399 width: 100%;">消课记录</button>
					</view>
					<view v-if="checkPermi(['puyu:student:listStrengthTest'])">
						<button class="uni-button" size="mini" type="default"  @click="handleStudentStrength(item)"
							style="color:#ffffff;backgroundColor:#00aa00;borderColor:#00aa00 width: 100%;">体能指标</button>
					</view>
					<view v-if="checkPermi(['puyu:memberintegral:query'])">
						<button class="uni-button" size="mini" type="default"  @click="handlMemberIntegral(item)"
							style="color:#ffffff;backgroundColor:#bebe00;borderColor:#bebe00 width: 100%;">积分详情</button>
					</view>
					<view v-if="checkRole(['manager'])">
						<button class="uni-button" size="mini" type="default"  @click="handleMemberIntegral(item)"
							style="color:#ffffff;backgroundColor:#ffaa00;borderColor:#ffaa00 width: 100%;">设置积分</button>
					</view>
					<view v-if="checkPermi(['puyu:strengthtest:remove'])">
						<button class="uni-button" size="mini" type="warn"
							@click="handleDeleteStuent(item)">删除</button>
					</view>
				</uni-td>
			</uni-tr>
		</uni-table>
		<uni-pagination :page-size="queryParams.pageSize" :current="queryParams.pageNum" :total="total" @change="change"
			prev-text="前一页" next-text="后一页" />
		<view class="page-sum">
			<text>当前页：{{ queryParams.pageNum }}，数据总量：{{ total }} 条，每页数据：{{ queryParams.pageSize }} 条</text>
		</view>
	</view>
</template>

<script>
	import {
		checkPermi,
		checkRole
	} from "@/utils/permission";
	import { listStudent, listStudents, delStudent, getStudent } from "@/api/puyu/student";
	import { getMemberByPhoneAndName } from "@/api/puyu/memberintegral";
	import { getDicts } from "@/api/system/dict/data";
	import { parseTime } from '@/utils/common';
	export default {
		data() {
			return {
				// 遮罩层
				loading: true,
				// 总条数
				total: 0,
				// 课时信息
				lesson: {},
				dateRange: [],
				// 体能测试表格数据
				tableList: null,
				// 学员表格数据
				studentList: null,
				puyuTrainingTypeOptions: [],
				puyuStudentStatusOptions: [],
				// 查询参数
				queryParams: {
					pageNum: 1,
					pageSize: 5,
					studentId: null,
					studentCode: null,
					studentName: null,
				},
			}
		},
		computed: {
			studentCodeRange() {
				if (!this.studentList) {
					return [];
				}
				let arr = [];
				this.studentList.map(item => {
					arr.push(item.studentCode);
				});
				return arr;
			},
			studentNameRange() {
				if (!this.studentList) {
					return [];
				}
				let arr = [];
				this.studentList.map(item => {
					arr.push(item.studentName);
				});
				return arr;
			},
			studentStatusRange() {
				if (!this.puyuStudentStatusOptions) {
					return [];
				}
				let arr = [];
				this.puyuStudentStatusOptions.map(item => {
					arr.push(item.dictLabel);
				});
				return arr;
			},
			trainingTypeRange() {
				if (!this.puyuTrainingTypeOptions) {
					return [];
				}
				let arr = [];
				this.puyuTrainingTypeOptions.map(item => {
					arr.push(item.dictLabel);
				});
				return arr;
			},
		},
		created() {
			// 获取学员下拉列表
			this.getStudentLsit();
		},
		onShow() {
			this.getList();
		},
		methods: {
			checkPermi,
			checkRole,
			parseTime,
			/** 搜索按钮操作 */
			handleQuery() {
				this.queryParams.classBalance = null;
				this.queryParams.pageNum = 1;
				this.queryParams.params['beginFifteenDays'] = '';
				this.getList();
			},
			/** 课时用完按钮操作 */
			handleQueryZero() {
				this.queryParams.classBalance = 0;
				this.queryParams.pageNum = 1;
				this.queryParams.params['beginFifteenDays'] = '';
				this.getList();
			},
			/** 三个月内到期学员查询 */
			handleQueryMonth() {
				let begin = new Date();
				let end = this.addMonths(begin, 3);
				this.dateRange = [parseTime(begin, '{y}-{m}-{d}'), parseTime(end, '{y}-{m}-{d}')];
				this.queryParams.pageNum = 1;
				this.queryParams.params['beginFifteenDays'] = '';
				this.getList();
			},
			/** 15天未上课学员查询 */
			handleQueryFifteen() {
				let end = new Date();
				let begin = this.addDays(end, -15);
				let dateRange = [parseTime(begin, '{y}-{m}-{d}'), parseTime(end, '{y}-{m}-{d}')];
				this.queryParams.pageNum = 1;
				
				this.loading = true;
				this.queryParams.orderByColumn = 'studentId'; //查询字段是表格中字段名字
				this.queryParams.isAsc = 'descending'; //动态取值排序顺序
				listStudent(this.addDateRange(this.queryParams, dateRange, 'FifteenDays')).then(response => {
					this.tableList = response.rows;
					this.total = response.total;
					this.loading = false;
				});
			},
			/** 查询课时点名列表 */
			getList() {
				this.loading = true;
				this.queryParams.orderByColumn = 'studentId'; //查询字段是表格中字段名字
				this.queryParams.isAsc = 'descending'; //动态取值排序顺序
				listStudent(this.addDateRange(this.queryParams, this.dateRange, 'ExpiredTime')).then(response => {
					this.tableList = response.rows;
					this.total = response.total;
					this.loading = false;
				});
			},
			/** 查询学员列表 */
			getStudentLsit() {
				listStudents().then(response => {
					this.studentList = response.data;
				});
				getDicts("puyu_student_status").then(response => {
					this.puyuStudentStatusOptions = response.data;
				});
				getDicts("puyu_training_type").then(response => {
					this.puyuTrainingTypeOptions = response.data;
				});
			},
			/** 添加学生 */
			handleAddStudent() {
				this.$tab.navigateTo('/pages/puyu/student/add');
			},
			// 根据studentId获取学员姓名
			getStudentName(studentId) {
				if (!this.studentList) {
					return '';
				}
				let student = this.studentList.filter(item => item.studentId == studentId)[0]
				return student?student.studentName:'';
			},
			/** 选择学号 */
			onStudentCode(e) {
				if (!this.studentList) {
					return;
				}
				if (!e) {
					this.queryParams.studentId = null;
					this.queryParams.studentName = null;
					this.getList()
					return;
				}
				let student = this.studentList.filter(item => item.studentCode == e)[0];
				if (student) {
					this.queryParams.studentId = student.studentId;
					this.queryParams.studentName = student.studentName;
				}
			},
			/** 选择学员姓名 */
			onStudentName(e) {
				if (!this.studentList) {
					return;
				}
				if (!e) {
					this.queryParams.studentId = null;
					this.queryParams.studentCode = null;
					this.getList()
					return;
				}
				let student = this.studentList.filter(item => item.studentName == e)[0];
				if (student) {
					this.queryParams.studentId = student.studentId;
					this.queryParams.studentCode = student.studentCode;
				}
			},
			/** 选择学员状态 */
			onStudentStatus(e) {
				if (!this.puyuStudentStatusOptions) {
					return;
				}
				if (!e) {
					this.queryParams.studentStatus = null;
					this.getList()
					return;
				}
				let studentStatusInfo = this.puyuStudentStatusOptions.filter(item => item.dictLabel == e)[0];
				if (studentStatusInfo) {
					this.queryParams.studentStatus = studentStatusInfo.dictValue;
				}
			},
			/** 选择训练类型 */
			onTrainingType(e) {
				if (!this.puyuTrainingTypeOptions) {
					return;
				}
				if (!e) {
					this.queryParams.trainingType = null;
					this.getList()
					return;
				}
				let trainingTypeInfo = this.puyuTrainingTypeOptions.filter(item => item.dictLabel == e)[0];
				if (trainingTypeInfo) {
					this.queryParams.trainingType = trainingTypeInfo.dictValue;
				}
			},
			showStudentStatus(value) {
				if (!this.puyuStudentStatusOptions) {
					return value;
				}
				let studentStatusLabel = ''
				let studentStatusInfo = this.puyuStudentStatusOptions.filter(item => item.dictValue == value)[0];
				if (studentStatusInfo) {
					studentStatusLabel = studentStatusInfo.dictLabel;
				}
				return studentStatusLabel;
			},
			getStatusClass(value) {
				let statusClass = 'status-green';
				if (value == '1') {
					statusClass = 'status-green';
				} else if (value == '2') {
					statusClass = 'status-yellow';
				} else if (value == '3') {
					statusClass = 'status-red';
				}
				return statusClass;
			},
			showTrainingType(value) {
				if (!this.puyuTrainingTypeOptions) {
					return [];
				}
				let trainingTypeLabel = ''
				let trainingTypeInfo = this.puyuTrainingTypeOptions.filter(item => item.dictValue == value)[0];
				if (trainingTypeInfo) {
					trainingTypeLabel = trainingTypeInfo.dictLabel;
				}
				return trainingTypeLabel;
			},
			/** 消课记录 */
			handleStudentLesson(item) {
				this.$tab.navigateTo('/pages/puyu/student/student-lesson?item=' + encodeURIComponent(JSON.stringify(item)));
			},
			/** 体能指标 */
			handleStudentStrength(item) {
				getStudent(item.studentId).then((response) => {
				  this.$tab.navigateTo('/pages/puyu/student/student-strength?item=' + encodeURIComponent(JSON.stringify(response.data)));
				});
			},
			/** 积分详情 */
			handlMemberIntegral(item) {
				let params = {
					phone: item.phone,
					memberName: item.studentName
				}
				getMemberByPhoneAndName(params).then((response) => {
					let member = response.data;
					if (member) {
						this.$tab.navigateTo('/pages/puyu/member-integral/member-integral?memberId=' + member.memberId);
					} else {
						this.$modal.showToast('该学生尚未建立队员积分！')
					}
				});
			},
			/** 设置积分*/
			handleMemberIntegral(item) {
				let member = {
					phone: item.phone,
					memberName: item.studentName
				}
				getMemberByPhoneAndName(member).then((response) => {
					if (!response.data) {
						member.userId = item.userId;
						member.deptId = item.deptId;
						this.$tab.navigateTo('/pages/puyu/student/add-member-integral?item=' + encodeURIComponent(JSON.stringify(member)));
					} else {
						this.$tab.navigateTo('/pages/puyu/member-integral/edit-member-integral?item=' + encodeURIComponent(JSON.stringify(response.data)));
					}
				});
			},
			/** 编辑学员信息*/
			handleEditStudent(item) {
				this.$tab.navigateTo('/pages/puyu/student/edit?item=' + encodeURIComponent(JSON.stringify(item)));
			},
			/** 删除学员信息*/
			handleDeleteStuent(item) {
				const studentIds = item.studentId;
				this.$modal.confirm('是否确认删除学员ID为"' + studentIds + '"的数据项？').then(function() {
				  return delStudent(studentIds);
				}).then(() => {
				  this.getList();
				  this.$modal.msgSuccess("删除成功");
				}).catch(() => {});
			},
			// 分页触发
			change(e) {
				this.$refs.table.clearSelection()
				this.getData(e.current)
			},
			// 获取数据
			getData(pageCurrent, value = '') {
				this.queryParams.pageNum = pageCurrent
				this.getList()
			},
			/** 日期月份添加处理 */
			addMonths(date, months) {
				const newDate = new Date(date.getTime());
				newDate.setMonth(newDate.getMonth() + months);
				return newDate;
			},
			/** 日期日份添加处理 */
			addDays(date, days) {
				const newDate = new Date(date.getTime());
				newDate.setDate(newDate.getDate() + days);
				return newDate;
			},
		}
	}
</script>

<style lang="scss" scoped>
	/* #ifndef H5 */
	/* page {
	padding-top: 85px;
} */
	/* #endif */
	
	.page-sum {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.search {
		display: flex;
		justify-content: space-around;
		margin: 20rpx;
		background-color: white;
		.button {
			margin: 2rpx;
		}
	}

	.query-form {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		background-color: #ffffff;
		margin-bottom: 10px;
	}

	.query-item {
		margin: 5rpx;
		padding: 5rpx;
	}
	
	.query-item-value {
		margin-top: 5rpx;
		color: darkgray;
	}
	
	.remark {
		color: #993399;
		font-weight: bolder;
	}
	.status-green {
		color: #00aa00;
		font-weight: bolder;
	}
	.status-yellow {
		color: #ffff00;
		font-weight: bolder;
	}
	.status-red {
		color: #ff0000;
		font-weight: bolder;
	}
</style>